<template>
  <div class="footer-container">
    <div class="row">
      <div id="badge" ref="badge" @click="showCar" class="car icon-shopping_cart" :class="[$store.getters.showAllNum === 0 ? 'nogoods' : 'hasgoods']"></div>
      <div class="num" v-show="$store.getters.showAllNum === 0 ? false : true">{{ $store.getters.showAllNum }}</div>
      <div class="price" :class="[$store.getters.showAllNum === 0 ? '' : 'hasprice']">
        ￥{{ $store.getters.showAllPrice }}
      </div>
      <div class="delivery">
        另需配送费￥4元
      </div>
      <div class="btn">
        ￥{{ ((parseInt($store.getters.showAllPrice) !== 0) && (parseInt($store.getters.showAllPrice) >= 20)) ? '20起送' : '还差' +
        (20 - parseInt($store.getters.showAllPrice)) + '起送'}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterBlock',
  methods: {
    showCar () {
      this.$emit('appfunc')
      // console.log(this.$store.getters.showAll)
    }
  }
}

</script>

<style lang="scss" scoped>
  .footer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 1.2rem;
    width: 100%;
    color: #fff;
    z-index: 300;

    .row {
      height: 100%;
      line-height: 1.2rem;
      display: flex;
      align-items: center;
      text-align: center;
      color: rgba(255, 255, 255, 0.4);
      background-color: #141d27;
      position: relative;

      .nogoods {
        background-color: #666;
      }

      .hasgoods {
        color: #fff;
        background-color: rgb(0, 160, 220);
      }

      .icon-shopping_cart {
        font-size: 0.6rem;
      }

      .car {
        position: relative;
        bottom: 9px;
        left: 0;
        height: 100%;
        line-height: 0.8rem;
        width: 1.2rem;
        border: 10px solid #141d27;
        border-radius: 50%;
      }

      .num {
        position: absolute;
        top: -10px;
        left: 0.6rem;
        height: 0.4rem;
        line-height: 0.4rem;
        width: 0.6rem;
        color: #fff;
        background: rgb(240, 20, 20);
        border-radius: 10px;
      }

      .price {
        flex: 0 0 15%;
        height: 60%;
        line-height: 0.6rem;
        font-size: 0.4rem;
        font-weight: 700;
        text-align: start;
        border-right: 1px solid #666;
      }

      .hasprice {
        color: #fff;
      }

      .delivery {
        flex: 0 0 35%;
        height: 100%;
        font-size: 0.28rem;
      }

      .btn {
        flex: auto;
        height: 100%;
        font-size: 0.34rem;
        font-weight: 700;
        color: #eee;
        background: -webkit-linear-gradient(to bottom right, #141d27, #666);
        background: -o-linear-gradient(to bottom right, #141d27, #666);
        background: -moz-linear-gradient(to bottom right, #141d27, #666);
        background: linear-gradient(to bottom right, #141d27, #666);
      }
    }
  }

</style>
